import { AfterViewInit, Component, Inject, OnInit } from '@angular/core';
import { SearchService } from '@core/services/search.service';
import { ApiService } from '@core/services/http/api.service';
import { StepsGuideService } from '@shared/apes/steps-guide';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'apes-demo07',
  templateUrl: './demo07.component.html',
  styles: [`
    .show-steps-guide.node{
      display: none;
    }
  `],
})
export class Demo07Component implements OnInit,AfterViewInit {

  buttonBar = [
    { hide: true, style: 'default', label: '查找', id: 'action_search' },
  ];
  ctx = { model: {} };

  observerDom: any;
  targetElement: HTMLElement;
  // steps = [
  //   {
  //     title: 'Step 1',
  //     content: 'Guide Content',
  //   },
  //   {
  //     title: 'Step 2',
  //     content: 'Guide Content',
  //   },
  //   {
  //     title: 'Step 3',
  //     content: 'Guide Content',
  //   },
  // ];
  config = {
    hidePreStep: false,
    hideStepNav: false,
  };

  steps: any = [];
  stepsItem = [
    {
      pageName: 'steps-demo',
      target: 'test1',
      position: 'bottom-right',
      steps: {
        title: 'Step 1',
        content: 'Guide Content',
      },
    },
    {
      pageName: 'steps-demo',
      target: 'test2',
      position: 'bottom-right',
      steps: {
        title: 'Step 2',
        content: 'Guide Content',
      },
    },
    {
      pageName: 'steps-demo',
      target: 'test3',
      position: 'bottom-right',
      steps: {
        title: 'Step 3',
        content: 'Guide Content',
      },
    },
  ];

  constructor(
    protected searchService: SearchService,
    protected apiService: ApiService,
    private stepService: StepsGuideService,
    @Inject(DOCUMENT) private doc: any,
  ) {
  }

  ngOnInit(): void {
    // this.targetElement = this.doc.getElementById('test-btn');
    /* 用于判断内容变化的dom，可选择最接近变化范围的容器，
    在angular组件或路由下可能不能正确触发，可选择更外层容器尝试 */
    // this.observerDom = this.doc.getElementById('test-btn');
  }

  ngAfterViewInit() {
    // setTimeout(()=>{
      this.init();
    // },1000);
  }

  onEvent(data: any) {
    if (data instanceof MouseEvent) return;
    if (data) {
      if (data.id === 'action_search') {
        this.action_search();
      }
    }
  }

  private action_search() {
    let api = 'api.importModel.findAll';
    this.searchService.openDialog(api, false, (result: any) => {
      if (result && result.length > 0) {

      }
    }).subscribe();
  }

  reset(index = 0) {
    this.stepService.showGuide(false);
    localStorage.setItem('devui_guide_step-basic-demo', '0');
    this.stepService.setSteps(this.steps);
    /* 由于showGuide方法是针对当前显示的操作指引序列进行开关，当在一个页面内显示多个操作指引序列时（比如本示例），
    无法用来在多个序列间切换。可以使用removeItem和setCurrentIndex组合来达到showGuide(true) 的效果。 */
    localStorage.removeItem('devui_guide_step-custom-demo');
    this.stepService.setCurrentIndex(index);
  }

  close() {
    this.stepService.showGuide(false);
  }



  init(){
    console.log('test');
    this.stepsItem.forEach((step)=>{
      step['targetElement'] = this.getTargetId(step.target);
      this.steps.push(step.steps);
    })
  }

  getTargetId(id) {
    let target = this.doc.getElementById(id);
    return target;
  }

  resetTest(index = 0){
    this.stepService.showGuide(false);
    localStorage.removeItem('devui_guide_steps-demo');
    this.stepService.setSteps(this.steps);
    this.stepService.setCurrentIndex(index);
  }
}

